<template>
  <a-tabs :defaultActiveKey="0">
    <template #rightExtra>
      <span>
        <a-dropdown>
          <template #overlay>
            <a-menu>
              <template v-for="(chart, index) in group.charts" :key="index">
                <a-menu-item @click="handleMenuClick(chart.head.id)">{{ chart.head.name }}</a-menu-item>
              </template>
            </a-menu>
          </template>
          <a-button type="primary" size="small" class="ant-btn-background-ghost" ignore-print="true" @click="details(chart.head.id)"
            >详情<a-icon type="down"
          /></a-button>
        </a-dropdown>
        <!-- <a-button type="link" @click="handleToggle">
          <span v-if="isShow">展开<a-icon type="down" /></span>
          <span v-else>收起<a-icon type="up" /></span>
        </a-button> -->
      </span>
    </template>

    <template v-for="(chart, index2) in group.charts" :key="index2">
      <a-tab-pane :tab="chart.head.name" style="margin-top: 10px">
        <transition name="slide-fade">
          <group-auto-chart v-if="isShow" :propsChartData="chart" :key="index2" />
        </transition>
      </a-tab-pane>
    </template>
  </a-tabs>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import GroupAutoChart from './GroupAutoChart.vue';
  import { useRouter } from 'vue-router';

  export default defineComponent({
    name: 'GroupTemplateGrid',
    components: {
      GroupAutoChart,
    },
    props: {
      group: {
        type: Object,
        default: () => ({}),
      },
    },
    setup(props, { emit }) {
      const isShow = ref(true);
      let router = useRouter();
      function handleMenuClick(id) {
        router.push({ path: '/online/graphreport/chart/' + id });
      }
      function handleToggle() {
        isShow.value = !isShow.value;
      }
      return { isShow, handleMenuClick, handleToggle };
    },
  });
</script>
<style scoped>
  .slide-fade-enter-active {
    transition: all 0.3s ease;
  }
  .slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
